<template>
  <a-modal
    :width="720"
    :visible="visible"
    title="新增供应商"
    okText="新增"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create') }"
  >
    <a-form :form="form">
      <a-form-item
        label="供应商"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-select
          show-search
          placeholder="请选择"
          mode="multiple"
          v-decorator="[
            'servers',
            {rules: [{ required: true, message: '请选择供应商' }]}
          ]"
        >
          <a-select-option
            v-for="item in serverOptions"
            :key="item.id+'&'+item.serverName"
          >{{ item.serverName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="限额规则"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-select
          show-search
          placeholder="请选择"
          v-decorator="[
            'limit',
            {rules: [{ required: false, message: '请选择限额规则' }]}
          ]"
        >
          <a-select-option
            v-for="item in limitOptions"
            :key="item.limitAmount+'&'+item.limitName"
          >{{ item.limitName }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="自定义限额"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-input
          v-decorator="[
              'limitAmount',
              {rules: [{ required: false, message: '请输入月度个人限额' }]}
            ]"
          name="limitAmount"
          placeholder="98500"
        />
      </a-form-item>
      <a-form-item
        label="注"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <span>限额规则和自定义限额二选一，同一限额规则下所有供应商总额共享</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import {getXbdServers} from '@/api/manage'

export default {
  data(){
    return{
      serverOptions : [],
      limitOptions: []
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    this.getOptimal()
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'form_in_modal' })
  },
  methods: {
    show(limitOptions){
      // this.visible = true
      this.limitOptions = limitOptions
    },
    getOptimal() {
      getXbdServers()
        .then(res =>{
          this.serverOptions = res.resData
        })
    }
  }
}
</script>
